<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .map{width:400px;height:200px;background: #eee;position: relative;}
        .food{width:10px;height:10px;background: red;position: absolute;}
    </style>
</head>
<body>
    <div class="map"></div>
</body>
<script>


    
    // 蛇：多节组成
    function Snake(){
        this.map = document.querySelector(".map")
        // 1. 初始的每个蛇节的信息
        this.body = [{x:5,y:3},{x:4,y:3},{x:3,y:3}];

        this.direct = "right";

        // 5. 绑定键盘事件控制方向
        this.addEvent()

        // 2. 创建蛇节
        this.createEle()
    }
    Snake.prototype.addEvent = function(){
        const that = this;
        document.onkeydown = function(eve){
            const e = eve || window.event;
            const code = e.keyCode || e.which;
            // 6. 根据键码，修改蛇的初始运动方向
            switch(code){
                case 37:that.direct = "left";break;
                case 38:that.direct = "top";break;
                case 39:that.direct = "right";break;
                case 40:that.direct = "bottom";break;
            }
        }
    }
    Snake.prototype.createEle = function(){
        // 根据蛇节信息，创建元素，设置样式
        this.body.forEach(val=>{
            if(!val.ele){
                val.ele = document.createElement("div");
                val.ele.style.width = "10px"
                val.ele.style.height = "10px"
                val.ele.style.background = "pink";
                val.ele.style.position = "absolute";
                this.map.appendChild(val.ele);
            }
            val.ele.style.left = val.x * 10 + "px";
            val.ele.style.top = val.y * 10 + "px";
        })
        this.body[0].ele.style.background = "green";
        setTimeout(()=>{
            // 3. 移动
            this.move();
        }, 100)
    }
    Snake.prototype.move = function(){
        // 从最后的蛇节向前一个蛇节移动
        for(let i=this.body.length-1;i>0;i--){
            this.body[i].x = this.body[i-1].x;
            this.body[i].y = this.body[i-1].y;
        }
        // 最后根据初始运动方向控制要移动的坐标
        switch(this.direct){
            case "left":
                this.body[0].x--;break;
            case "right":
                this.body[0].x++;break;
            case "top":
                this.body[0].y--;break;
            case "bottom":
                this.body[0].y++;break;
        }

        // 撞到食物了
        if(this.body[0].x === f.x && this.body[0].y === f.y){
            f.randomPos();
            this.body.push({
                x:this.body[this.body.length-1].x,
                y:this.body[this.body.length-1].y
            })
        }
        
        // 撞到墙了
        if(this.body[0].x < 0 || this.body[0].y < 0 || this.body[0].x > 39 || this.body[0].y > 19){
            alert("撞墙死了")
            return;
        }

        // 撞到自己了
        for(let i=1;i<this.body.length;i++){
            if(this.body[0].x === this.body[i].x && this.body[0].y === this.body[i].y){
                alert("撞自己死了")
                return;
            }
        }

        // 4. 重新渲染所有蛇节
        this.createEle();
    }

    

    // 食物
    function Food(){
        this.map = document.querySelector(".map");
        this.x = 0;
        this.y = 0;
        // 1. 创建食物元素
        this.createEle();
    }
    Food.prototype.createEle = function(){
        // 创建元素，设置默认样式
        this.ele = document.createElement("div")
        this.ele.className = "food";
        this.map.appendChild(this.ele);
        // 2. 随机食物位置
        this.randomPos();
    }
    Food.prototype.randomPos = function(){
        this.x = random(0,39);
        this.y = random(0,19);
        this.ele.style.left = this.x * 10 + "px";
        this.ele.style.top = this.y * 10 + "px";
    }

    
    const f = new Food();
    new Snake();


    // 1. 不能掉头（不是掉头即死）
    // 2. 开始游戏（重置），暂停游戏（继续游戏）按钮
    // 3. 难度选择（速度）
    // 4. 积分
    // 5. 关卡
    // 6. 蛇节的坐标有可能与食物的坐标重叠的问题




    function random(max,min){
        return Math.round(Math.random()*(max-min)+min);
    }



</script>
</html>